<template>
    <vxe-modal v-model="dialogVisible" :title="title" :width="width" :height="height" :zIndex="zIndex" :showFooter="showFooter" show-zoom resize>
        <slot name="default"></slot>
        <template #footer>
            <el-button @click="closeDialog">取消</el-button>
            <el-button type="primary" @click="confirm">确定</el-button>
        </template>
    </vxe-modal>
</template>

<script>
export default {
	props: {
		height: {
			type: String,
			default: "95%"
		},
		width: {
			type: String,
			default: "80%"
		},
        title: {
            type: String,
            default: ""
        },
		zIndex: {
			type: Number,
			default: 101
		},
        showFooter: {
            type: Boolean,
            default: true
        },
	},
	data () {
		return {
			dialogVisible: false
		}
	},
	mounted () {

	},
	methods: {
		openDialog(){
			this.dialogVisible = true;
		},
		closeDialog(){
			this.dialogVisible = false;
		},
        confirm(){
            this.closeDialog();
            this.$emit("confirm");
        }
	}
}
</script>

<style lang="scss" scoped>

</style>
